<!--
 * @Author       : zp
 * @Date         : 2021-07-03 19:29:05
 * @LastEditors  : ly
 * @LastEditTime : 2021-07-09 15:22:40
 * @Description  : 描述
-->
<template>
  <a-modal
    :title="modalTitle"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :class="{ isFooter: !isFooter }"
    @cancel="handleCancel"
    @ok="handleOk"
    :width="width"
    :maskClosable="false"
  >
    <component
      :ref="refName"
      @close-modal="closeModal"
      v-if="isRefresh"
      :is="operateType"
    ></component>
  </a-modal>
</template>
<script>
  import editMobile from './modalForm/EditMobile.vue'
  import editPass from './modalForm/EditPass.vue'
  import userInfo from './modalForm/UserInfo.vue'
  import editAvatar from './modalForm/EditAvatar.vue'
  export default {
    name: 'TableEdit',
    components: {
      editMobile,
      editPass,
      userInfo,
      editAvatar,
    },

    data() {
      return {
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
        operateType: '',
        modalTitle: '',
        isFooter: null,
        rowData: null,
        refName: null,
        isRefresh: false,
        width: 600,
      }
    },
    watch: {
      visible(newVal) {
        this.isRefresh = newVal
      },
    },
    mounted() {
      console.log(this.selectedRowKeys)
    },
    methods: {
      showModal(operateType, rowData, isFooter) {
        this.operateType = operateType
        this.isFooter = isFooter
        this.rowData = rowData
        console.log(operateType, rowData, isFooter)
        this.refName = operateType
        switch (operateType) {
          case 'editMobile':
            this.modalTitle = '修改手机号码'
            break
          case 'editPass':
            this.modalTitle = '修改密码'
            break
          case 'userInfo':
            this.width = 1000
            this.modalTitle = '基本资料'
            break
          case 'editAvatar':
            this.width = 580
            this.modalTitle = '上传头像'
            break
          default:
            break
        }
        this.visible = true
      },
      handleOk() {
        // 处理form
        this.$refs[this.refName].onSubmit(this.rowData, this.operateType)
      },
      handleCancel() {
        try {
          // this.visible = this.$refs[this.refName].resetForm()
          this.closeModal()
        } catch (error) {
          // 没有resetForm方法
          this.visible = false
        }
      },
      closeModal() {
        this.$refs[this.refName].resetForm()
        // this.reloadTableList()
        this.$emit('reloadData')
        this.visible = false
        this.width = 600
      },
      // reloadTableList() {
      //   this.$emit('reload-table-list')
      // },
    },
  }
</script>
